<template>
    <!-- 内容归类 -->
    <section class="w-full h-full flex">
        <div class="base-list h-full pl-12" v-loading="loading">
            <div class="p-3 flex items-center justify-between base-head">
                <span class="font-bold text-base head-title">故障的分类</span>
            </div>
            <el-scrollbar>
                <el-tree style="max-width: 600px" :data="treeData" show-checkbox node-key="value" :props="defaultProps"
                ref="tree" default-expand-all  :default-checked-keys="[]"/>
            </el-scrollbar>
        </div>
        <div class="sys-info">
            <el-scrollbar class="info-scroll">
                <div class="textera-save-style">
                    <el-input type="textarea" v-model="textareaVal" :rows="10" placeholder="请输入故障的描述"
                        class="text-input no-border" @focus="handleFocus" @blur="handleBlur" ref="textrea"/>
                    <el-icon class="clear-button" @click="clearInput" @mouseover="overColor" @mouseout="outColor">
                        <Close />
                    </el-icon>
                    <div class="button-container">
                        <el-button @click="setDefault">设为默认值</el-button>
                        <el-button type="primary" @click="saveInput">开始归类</el-button>
                    </div>
                </div>
                <div class="ai-answers w-2/5" v-show="cardShow">
                    <div class="flex flex-col">
                        <div class="flex self-start p-2.5  max-box">
                            <div class="w-11 h-11 mr-2.5">
                                <img src="/src/assets/images/robot_circle.png" alt="" class="w-11 h-full rounded">
                            </div>
                            <div class="ai-answer p-2.5 m-1.5 relative rounded-lg">
                                <div class="ai-triangle absolute"></div>
                                <span v-if="!aiAnswer" class="flex items-center"><img
                                        src="../../assets/images/avatar/long.gif" alt=""
                                        class="w-5 h-5 mr-1">AI正在归类......</span>
                                <span v-else> AI    归类完成</span>
                                <div class="rounded-lg flex  justify-end items-center">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- {{ qwe }}-->
            </el-scrollbar>
        </div>
    </section>
</template>
<script lang="ts" setup>
const hasToken = <string>localStorage.getItem('accessToken');
import ContentClassify from "../../api/currentdemo/ContentClassify"
const loading = ref(false);

const textareaVal = ref('我家的水表的玻璃破了');
const qwe = ref('');
const tree = ref(null);
const router = useRouter()

//控制ai默认显示内容
const aiAnswer = ref(false);
//控制card显示隐藏
const cardShow = ref(false);
//小叉叉清空事件
const clearInput = () => {
    textareaVal.value = '';

};
const textrea=ref();
//设为默认值
const setDefault = () => {
    // console.log('设为默认值');
    const defaultStr = `我家的水表的玻璃破了`
    textareaVal.value = defaultStr;
};
const handleFocus = () => {
    document.querySelector('.textera-save-style').classList.add('change-color');
};
const handleBlur = () => {
    document.querySelector('.textera-save-style').classList.remove('change-color');
};
const overColor = () => {
    document.querySelector('.clear-button').classList.add('a');
}
const outColor = () => {
    document.querySelector('.clear-button').classList.remove('a');
}
const defaultProps = {
    children: 'children',
    label: 'value',
}
const treeData = [
    {
        value: '用水问题',
        children: [
            {
                value: '无水',
            },
            {
                value: '水小',
            },
            {
                value: '水压不稳',
            },
            {
                value: '水管有异响',
            },
            {
                value: '其他',
            },
        ],
    },
    {
        value: '水管设备',
        children: [
            {
                value: '水表漏水',
            },
            {
                value: '阀门漏水',
            },
            {
                value: '水管漏水',
            },
            {
                value: '消防栓漏水',
            },
            {
                value: '水表损坏',
            },
            {
                value: '阀门损坏',
            },
            {
                value: '消防栓损坏',
            },
            {
                value: '其他',
            },
        ],
    },
    {
        value: '水质问题',
        children: [
            {
                value: '水黄',
            },
            {
                value: '水白',
            },
            {
                value: '水有气泡',
            },
            {
                value: '水有异物',
            },
            {
                value: '水有异味',
            },
            {
                value: '水浑',
            },
            {
                value: '其他',
            },
        ],
    }
];
//开始归类事件
const saveInput = () => {
    // console.log('开始归类');
    tree.value.setCheckedKeys([]);

    if (!textareaVal.value.trim()) {
        ElMessage.error('请填写识别文本');
        return;
    }
    // 让ai先展示出来
    cardShow.value = true;
    aiAnswer.value = false;

    const obj = {
        cats: JSON.stringify(treeData),
        content: textareaVal.value
    };
     loading.value = true;

    // console.log('obj',obj);
    ContentClassify.IntentTellSave(hasToken, obj).then(res => {
        aiAnswer.value = true;
        console.log('res==', res);
        const [parentValue, childValue] = res.data.split("->");
        // 取消上一次的选中
        tree.value.setCheckedKeys([]);


      // 找到父节点和子节点
      const parentNode = tree.value.store.nodesMap[parentValue];
      const childNode = tree.value.store.nodesMap[childValue];
  
      if (parentNode && childNode) {
        // 选中父节点和子节点
        
        tree.value.setChecked(parentNode.data, true, false);
        tree.value.setChecked(childNode.data, true, false);
        ElMessage.success('归类成功');
      }
        if (res.data === '') {
            ElMessage.error('未识别到分类');

        }
        qwe.value = res.data
        loading.value=false
    }).catch(error => {
        loading.value=false
        ElMessage.error('归类失败');
    });
};
// 页面缓存，清空所有的内容
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        textareaVal.value = '';
        aiAnswer.value = false;
        cardShow.value = false;
        if(textrea.value){
            textrea.value.focus();
        }
        if(tree.value){
            tree.value.setCheckedKeys([]);
        }
    },
    { immediate: true }
)
onMounted(()=>{
    textrea.value.focus();
})
</script>
<style scoped>
.base-list {
    width: 18rem;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--v-ai-rate-border-color);
    position: fixed;
    right: 0;
    width: 20%;
}
.head-title{
    color: var(--v-session-hist);
}

.base-list /deep/ .el-scrollbar__view {
    height: 100%;
}

.sys-info {
    /* flex: 1; */
    width: 77%;
    display: flex;
    margin: 30px 0;
    justify-content: center;
}

.info-scroll {
    width: 100%;

}

.sys-info ::v-deep(.el-scrollbar__wrap) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sys-info ::v-deep(.el-scrollbar__view) {
    width: 55%;
}

:deep(.el-textarea__inner) {
    border: none;
    box-shadow: none;
    resize: none;
}

.textera-save-style.change-color {
    border-color: #409eff;
}

.textera-save-style {
    border-radius: 5px;
}

.clear-button.a {
    color: #409eff;
}

.ai-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid var(--v-chat_box_shadow_1);
    top: 8px;
    left: -10px;
}

.ai-answer {
    background-color:var(--v-ai-custmer-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.ai-answers{
    margin: 20px 0;
}
</style>